<template>
    <div>
        <div id="midContent"></div>
        <div class="titles">总工单</div>
        <div class="rate">完成数: <span class="num">{{nums}}</span></div>
    </div>

</template>

<script>
    import echarts from 'echarts'
    import {getFinishCount} from "../../../network/home";
    export default {
        name: "midContent",
        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        data() {
            return {
                nums:'0',
                rate:'50',
                timer:null
            }
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('中上关闭')
            }
        },
        methods: {
            setEchart() {
                getFinishCount().then(res => {
                    if(res.code=='200'){
                        // console.log(res.data[0].wancheng)
                        // console.log(res.data[0].wanchengPre)
                        this.rate = res.data[0].wanchengPre
                        this.nums = res.data[0].wancheng


                        let myChart = echarts.init(document.getElementById("midContent"));
                        myChart.setOption({
                            // backgroundColor: "#062a44",
                            series: [{
                                name: '订单总数',
                                type: 'gauge',
                                radius: '60%',
                                min: 0,
                                max: 2500,
                                splitNumber: 5, //刻度数量
                                startAngle: 210,
                                endAngle: -30,
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        width: 1,
                                        color: [[2, '#19305C']]
                                    }
                                },//仪表盘轴线
                                axisLabel: {
                                    show: true,
                                    color: '#00f5ff',
                                    // backgroundColor:"#fff",
                                    distance: -15
                                },//刻度标签。
                                axisTick: {
                                    show: true,
                                    length: -8,
                                    splitNumber: 10,
                                    lineStyle: {
                                        color: '#00f5ff',
                                        width: 2
                                    }
                                },//刻度样式
                                splitLine: {
                                    show: true,
                                    length: -15,
                                    lineStyle: {
                                        color: '#00f5ff'
                                    }
                                },//分隔线样式
                                detail: {
                                    show: true
                                },
                                pointer: {
                                    show: true
                                }
                            },
                                {
                                    type: 'gauge',
                                    radius: '50%',
                                    center: ['50%', '50%'],
                                    splitNumber: 0, //刻度数量
                                    startAngle: 220,
                                    endAngle: -40,
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            width: 30,
                                            color: [
                                                [
                                                    0.98, new echarts.graphic.LinearGradient(
                                                    0, 0, 1, 0, [{
                                                        offset: 0,
                                                        color: '#ae3df6'
                                                    },
                                                        {
                                                            offset: 1,
                                                            color: '#53bef9'
                                                        }
                                                    ]
                                                )
                                                ],
                                                [
                                                    1, '#53bef9'
                                                ]
                                            ]
                                        }
                                    },
                                    //分隔线样式。
                                    splitLine: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        show: false
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    pointer: {
                                        show: false
                                    },
                                    title: {
                                        show: true,
                                        offsetCenter: [0, '-20%'], // x, y，单位px
                                        textStyle: {
                                            color: '#EE6FF0',
                                            fontSize: 23
                                        }
                                    },
                                    //仪表盘详情，用于显示数据。
                                    detail: {
                                        show: true,
                                        offsetCenter: [0, '25%'],
                                        color: '#EFF070',
                                        formatter: function (params) {
                                            // console.log(params);
                                            return params + '%'
                                        },
                                        textStyle: {
                                            fontSize:32
                                        }
                                    },
                                    data: [{
                                        name: "完成率",
                                        value:this.rate,
                                    }]
                                }
                            ]
                        });
                    }
                });
            }

        }
    }
</script>

<style scoped>
    #midContent {
        width: 100%;
        height: 450px;
        background: url("../../../assets/img/workcategory/ywlb_mid_content_bg.png") no-repeat;
        background-size: 450px;
        background-position: 65px -5px;
    }
    .titles {
        font-size: 22px;
        color: #31FF00;
        position: absolute;
        left: 50%;
        top: 17%;
        transform: translate(-50%,-50%);
    }
    .rate {
        position: absolute;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        color: #F9AF00;
        font-size: 21px
    }
    .num{
        color: #11E5B3;
    }
</style>
